<template>
	<view class="electricity">
		<view class="pageHead">
			<view class="headStatus" :style="{height: sysHeight}"></view>
			<view class="headNav">
				<view class="iconfont icon-fanhui2" @tap="returns"></view>
				<view class="headTitle">
					<!-- 话费充值 -->
					تىلفۇن ھەققى
				</view>
			</view>
		</view>
		<view class="bodyWrap" :style="{height: 'calc(100vh - ' + headH + ')'}">
			<view class="wrapTitle">
				تىلفۇن ھەققى
			</view>
			<view class="electricityTxt">
				<view class="telephone">
					{{telephoneVal}}
				</view>
				<view class="telephoneTips">
					<image class="image" src="/static/images/tishi-icon.png" mode=""></image>
					نۇمۇر خاتا بولمىسۇن
				</view>
			</view>
			<!-- 查询信息 -->
			<view class="checkResult" v-if="phoneBalance">
				<view class="resultTitle">
					<text class="resultTitleTxt">تەكشۈرۈش نەتىجىسى</text>
				</view>
				<view class="resultInfo">
					<view class="resultInfoItem">
						<view class="itemLabel">
							ئىسىم فامىلىسى
						</view>
						<view class="itemVal">
						</view>
					</view>
					<view class="resultInfoItem">
						<view class="itemLabel">
							قالدۇق
						</view>
						<view class="itemVal">
							¥{{phoneBalance && phoneBalance.split(':').join('')}}
						</view>
					</view>
				</view>
			</view>
			<!-- tab -->
			<view class="tabWrap">
				<view :class="['itemTab', 'rtl', item.value === tabSelectVal ? 'tabActive' : '']" v-for="item in tabData" @click="changeTabVal(item)" :key="item.value">
					{{item.label}}
				</view>
			</view>
			<!-- 内容区域 -->
			<view class="denomination">
				<view class="arbitrarily" v-if="arbitrarilyData.length">
					<input class="input" type="number" @blur="blurFn" @input="moneyInput($event)" :adjust-position="false" :focus="true" v-if="inputShow" />
					<view style="color: #CDCDCD;" class="input"
						@click="this.inputShow = true" v-else>
						خالىغان قىممەت
					</view>
				</view>
				<view class="denominationWrap">
					<view :class="['rtl', 'denominationItem', item.denominationId === selectVal ? 'active' : '']" v-for="(item, index) in useArr" @click="clickItem(item)">
						<view class="itemMoney">
							{{tabSelectVal === '3' ? item.flowName : item.money}}
							<text class="company" v-if="tabSelectVal !== '3'">يۈەن</text>
						</view>
						<view class="rtl tips" v-if="(tabSelectVal === '3' && item.money) || (tabSelectVal !== '3' && item.remarks)">
							{{tabSelectVal === '3' ? `${item.money}يۈەن` : item.remarks}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="coupon">
				<view class="couponLeft">
					<image class="hongbao" src="/static/images/hongbao.png" mode=""></image>
					<view class="couponTxt">
						ئىتىۋار بىلىتى
					</view>
				</view>
				<view class="couponSelect">
					-¥6
					<image class="jiantou" src="/static/images/jiantou1.png" mode=""></image>
				</view>
			</view>
			<view class="vipBox">
				<view class="vipTitle">ۋاكالەتچى بۇلامسىز ؟</view>
				<view class="vipDes">ئالاھىدە ئەزا بولسىڭىز تېخىمۇ كۆپ ئىتىۋارلاردىن بەھىرلىنەلەيسىز</view>
				<button class="vipBtn" type="default">ئېچىش</button>
			</view> -->
			<view class="btmBox">
				<view class="btmSub">
					<view class="money">
						¥ {{total_price}}
					</view>
					<view class="subBtn" @click="submit">
						قاچىلاش
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request_mp.js"
	import { telephoneQuery, telephoneDenomination, teleflowDenomination, telephoneOrder, teleflowOrder, telephonePayAgain, telephonePayCancel, teleflowPayAgain, teleflowPayCancel } from "@/api/dailyLife.js"
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let headH= uni.getSystemInfoSync().statusBarHeight + 43 + 'px';
	export default {
		data() {
			return {
				telephoneVal: '',
				sysHeight: sysHeight,
				selectVal: "",
				denominationArr: [], // 面额数据
				headH: headH,
				phoneBalance: 0,
				// tab
				tabSelectVal: '1',
				selectType: '1',
				tabData: [
					{
						label: this.$i18n['话费快充'],
						value: '1'
					},
					{
						label: this.$i18n['话费慢充'],
						value: '2'
					},
					{
						label: this.$i18n['流量充值'],
						value: '3'
					}
				],
				queryId: 0,
				fastChargingArr: [], // 快充
				slowChargeArr: [], // 慢充
				teleflowData: [], // 流量
				fee: 0, // 服务费
				price: 0, // 金额
				orderId: '', // 上次支付用的订单id
				orderNo: '' ,// 上次支付用的订单编号
				inputVal: '', // input值
				inputShow: false // 是否显示input
				
			};
		},
		
		computed: {
			// 总金额
			total_price() {
				return Number((Number(this.price) + Number(this.fee)).toFixed(2));
			},
			// 面值数据
			useArr: function() {
				if (this.tabSelectVal === '3') {
					return this.denominationArr;
				}
				return this.denominationArr.filter(item => item.denoType === 1)
			},
			// 任意冲
			arbitrarilyData: function() {
				return this.denominationArr.filter(item => item.denoType === 2)
			}
		},
	
		methods: {
			// 后退
			returns() {
				return uni.navigateBack({
					delta: 1,
				})
			},
			// 点击面额
			clickItem(val) {
				this.inputShow = false;
				this.selectVal = val.denominationId;// 面额id
				this.price = val.money; // 面额价格
				this.fee = val.fee; // 面额价格
				this.selectType = this.tabSelectVal; // 当前面额所在类型 快充 慢充 流量
			},
			// tab切换
			changeTabVal(item) {
				this.inputShow = false;
				this.tabSelectVal = item.value;
				this.selectVal = '';// 面额id
				this.price = 0; // 面额价格
				this.fee = 0; // 面额价格
				if (item.value === '1') {
					if (this.fastChargingArr.length) {
						return this.denominationArr = this.fastChargingArr;
					}
					this.docQuery();
				} else if (item.value === '2') {
					if (this.slowChargeArr.length) {
						return this.denominationArr = this.slowChargeArr;
					}
					this.docQuery();
				} else if (item.value === '3') {
					if (this.teleflowData.length) {
						return this.denominationArr = this.teleflowData;
					}
					this.docQuery();
				}
			},
			// 任意值
			moneyInput(e) {
				this.inputVal = e.detail.value
				if (e.detail.value) {
					this.selectVal = this.arbitrarilyData[0].denominationId;// 面额id
					this.price = e.detail.value; // 面额价格
					this.fee = this.arbitrarilyData[0].fee; // 服务费
					this.selectType = this.tabSelectVal; // 当前面额所在类型 快充 慢充 流量
				} else {
					this.selectVal = 0;// 面额id
					this.price = 0; // 面额价格
					this.fee = 0; // 服务费
				}
			},
			// 面值查询
			async docQuery() {
				uni.showLoading({
					title: ''
				});
				try{
					if (this.tabSelectVal === '3') {
						// 获取流量面额
						const teleflowData = await teleflowDenomination({
							number: this.telephoneVal
						})
						this.teleflowData = teleflowData.data;
						this.denominationArr = teleflowData.data;
						uni.hideLoading();
						return;
					};
					// 获取话费面额
					const resData = await telephoneDenomination({
						number: this.telephoneVal,
						phoneRechargeType: this.tabSelectVal
					});
					if (this.tabSelectVal === '1') {
						this.fastChargingArr = resData.data;
						this.denominationArr = resData.data;
					}
					
					if (this.tabSelectVal === '2') {
						this.slowChargeArr = resData.data;
						this.denominationArr = resData.data;
					}
					uni.hideLoading();
				}catch(e){
					uni.hideLoading();
				}
				
			},
			// 订单提交
			async submit() {
				if (this.total_price === 0) {
					uni.showModal({
						title: this.$i18n['提示'],
						content: this.$i18n['请选择充值面额'],
						showCancel: false,
						confirmText: this.$i18n['确认']
					});
					return;
				}
				uni.showLoading({
					title: 'تۈلىنۋاتىدۇ'
				});
				let params = {
					number: this.telephoneVal,
					money: this.price,
					denominationId: this.selectVal,
					queryId: this.queryId
				}
				if (this.selectType === '3') {
					// 流量充值
					const teleflowData = await teleflowOrder(params)
					this.payFn(teleflowData)
					return;
				};
				// 话费充值
				const chargeOrder = await telephoneOrder(params);
				this.payFn(chargeOrder)
			},
			// 支付
			payFn(resData) {
				let that = this;
				const jsConfig = resData.data.jsConfig;
				let orderInfo = resData.data.order;
				uni.requestPayment({
					timeStamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.package,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign,
					success: function(res) {
						uni.hideLoading();
						uni.redirectTo({
							url: `/pages/dailyLife/rechargeResult/index?orderId=${orderInfo.orderId}&orderNo=${orderInfo.orderNo}&pageType=${that.selectType === '3' ? '6' : '5'}`
						})
					},
					fail: function(e) {
						uni.hideLoading();
						if (e.errMsg == 'requestPayment:fail cancel') {
							that.orderId = orderInfo.orderId;
							that.orderNo = orderInfo.orderNo;
							uni.showModal({
								title: that.$i18n['提示'],
								content: that.$i18n['是否取消支付？'],
								cancelText: that.$i18n['确认'],
								confirmText: that.$i18n['取消'],
								success: function (res) {
									if (res.confirm) {
										that.againPay()
									} else if (res.cancel) {
										that.cancelPay()
									}
								}
							});
							return;
						}
					},
				})
			},
			
			// 取消支付
			async cancelPay() {
				uni.showLoading({
					title: ''
				});
				let params = {
					orderId: this.orderId,
					orderNo: this.orderNo
				}
				try{
					let resData;
					if (this.selectType === '3') {
						resData = await teleflowPayCancel(params);
					} else {
						resData = await telephonePayCancel(params);
					}
					this.$util.Tips({
						title: resData.msg
					})
					uni.hideLoading();
				}catch(e){
					console.log(e);
					uni.hideLoading();
				}
			},
			
			// 重新支付
			async againPay() {
				uni.showLoading({
					title: 'تۈلىنۋاتىدۇ'
				});
				let params = {
					orderId: this.orderId,
					orderNo: this.orderNo
				}
				try{
					let resData;
					if (this.selectType === '3') {
						resData = await teleflowPayAgain(params);
					} else {
						resData = await telephonePayAgain(params);
					}
					this.payFn(resData);
				}catch(e){
					console.log(e);
					uni.hideLoading();
				}
			},
			
			// 查询余额
			async queryInfo(options) {
				let resData = await telephoneQuery({
					number: options.number
				});
				if (resData === 1) {
					this.phoneBalance = resData.data.balance;
				}
				this.queryId = resData.data.queryId;
			},
			blurFn() {
				if (!this.inputVal) {
					this.inputShow = false
				}
			}
		},
		onLoad(options) {
			this.telephoneVal = options.number;
			if (options.tab) {
				this.tabSelectVal = options.tab;
			}
			this.docQuery();
			this.queryInfo(options)
		},
	}
</script>

<style lang="scss">
	.electricity {
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #FDD048 0%, #FAF6ED 516rpx, #F9F9F9 100%);
		.pageHead {
			position: flex;
			.headStatus {
				width: 100%;
			}
			.headNav {
				display: flex;
				height: 43px;
				line-height: 43px;
				text-align: center;
				font-size: 36rpx;
				color: #333;
				.icon-fanhui2 {
					position: absolute;
					left: 40rpx;
				}
				.headTitle {
					width: 100%;
					height: 43px;
					line-height: 43px;
					width: 100%;
					text-align: center;
				}
			}
		}
		.btmBox {
			width: 750rpx;
			height: 198rpx;
		}
		.bodyWrap {
			padding: 50rpx 0rpx 0;
			overflow-y: auto;
			
			.wrapTitle {
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				padding: 0 30rpx;
			}
			.electricityTxt {
				margin-top: 10rpx;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.telephone {
					height: 74rpx;
					line-height: 74rpx;
					font-size: 52rpx;
					font-weight: 500;
					color: #333333;
					flex: 1;
				}
				.telephoneTips {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 18rpx;
					height: 56rpx;
					background: #E9550E;
					box-shadow: 0 2rpx 100rpx 0 rgba(169,169,169,0.2000);
					border-radius: 8rpx;
					opacity: 0.9;
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
					.image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}
				}
			}
			.checkResult {
				width: 690rpx;
				height: 136rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin: 20rpx auto 0;
				
				.resultTitle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.resultTitleTxt {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
				.resultInfo {
					margin-top: 30rpx;
					color: #333;
					display: flex;
					height: 28rpx;
					line-height: 28rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					
					.resultInfoItem {
						display: flex;
						align-items: center;
						margin-right: 62rpx;
						
						.itemLabel {
							margin-right: 20rpx;
						}
					}
				}
			}
			.tabWrap {
				width: 100%;
				display: flex;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
				background-color: #fff;
				.itemTab {
					flex: 1;
					height: 84rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					color: #666666;
				}
				.tabActive {
					color: #333333;
					background: #FDD04B;
					border-bottom: 2px solid #E9631F;
				}
			}
			.denomination {
				padding: 20rpx;
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 0 auto;
				
				.denominationWrap {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					max-height: 780rpx;
					overflow: auto;
					
					.denominationItem {
						width: 320rpx;
						height: 120rpx;
						background: #F8F8F8;
						border-radius: 16rpx;
						font-size: 32rpx;
						font-weight: 500;
						color: #E9550E;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-wrap: wrap;
						margin-bottom: 12rpx;
						
						// &:last-child:nth-child(2n + 1) {
						// 	margin-right: calc((100% - 50%) / 2);
						// }
						
						.itemMoney {
							font-size: 36rpx;
						}
						
						.company {
							font-size: 30rpx;
							font-weight: 500;
						}
						.tips {
							width: 100%;
							font-size: 24rpx;
							line-height: 22rpx;
							font-weight: 400;
							color: #666666;
							text-align: center;
						}
					}
					.active {
						color: #FFF;
						background: #FDD04B;
						.tips {
							color: #FFF;
						}
					}
				}
				.arbitrarily {
					border-bottom: 1px solid #EFEFEF;
					margin-bottom: 20rpx;
					.input {
						font-size: 32rpx;
						height: 88rpx;
						line-height: 88rpx;
						font-weight: 400;
					}
					
				}
			}
			
			.coupon {
				width: 690rpx;
				height: 110rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 20rpx;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.couponLeft {
					display: flex;
					align-items: center;
					.hongbao {
						width: 68rpx;
						height: 68rpx;
					}
					.couponTxt {
						margin-left: 18rpx;
					}
				}
				.couponSelect {
					font-size: 30rpx;
					font-weight: 500;
					color: #E9550E;
					.jiantou {
						width: 12rpx;
						height: 20rpx;
						margin-left: 14rpx;
					}
				}
			}
			
			.vipBox {
				width: 690rpx;
				height: 174rpx;
				background-image: url(https://xcx.azanbazar.com/program/vipBg.png);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				position: relative;
				margin-top: 20rpx;
				.vipTitle {
					height: 42rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					position: absolute;
					left: 196rpx;
					top: 44rpx;
				}
				.vipDes {
					width: 340rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
					position: absolute;
					left: 196rpx;
					top: 96rpx;
				}
				.vipBtn {
					width: 124rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: linear-gradient(90deg, #FFCA4C 0%, #FFB705 100%);
					border-radius: 4rpx;
					position: absolute;
					right: 30rpx;
					top: 54rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
			
			.btmSub {
				display: flex;
				width: 750rpx;
				height: 198rpx;
				background: #fff;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx 72rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				.money {
					font-size: 48rpx;
					font-weight: bold;
					color: #E9550E;
				}
				.subBtn {
					width: 296rpx;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					background: linear-gradient(178deg, #FFCE53 0%, #FDD04A 100%);
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	} 
</style>
